<template>
  <video-player
    :key="index"
    class="m-vedio-item video-player vjs-custom-skin"
    ref="videoPlayer"
    :options="playerOptions"
    @play="onPlayerPlay($event)"
    @pause="onPlayerPause($event)">
  </video-player>
</template>

<script scoped>
import 'video.js/dist/video-js.css'
import VideoPlayer from 'vue-video-player'
import 'videojs-flash'
import 'videojs-contrib-hls'
// import SWF_URL from 'videojs-swf/dist/video-js.swf'
// Vue.use(hls)
Vue.use(VideoPlayer)

export default {
  name: 'tw-camera',

  props: {
    currentCarema: {
      type: Object
    },
    cameraError: {
      type: Boolean
    },
    index: {
      type: Number,
      default: 0,
    },
    cameraVisible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '260',
    },
    height: {
      type: String,
      default: '146',
    },
    curPlay: {
      type: Number,
      default: 0,
    },
    topValue: {
      type: String,
      default: '1,300',
    },
    pageValue: {
      type: String,
      default: '10',
    },
    autoPlay: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    topValueArr () {
      if (this.topValue) {
        return this.topValue.split(',')
      } else {
        return ['0', '0']
      }
    }
  },
  data () {
    return {
      // autoPlay: false,
      // title: "视频监控",
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        height: this.height,
        width: this.width,
        loop: false,
        autoplay: false,
        preload: 'auto',
        aspectRatio: '16:9',
        fluid: true,
        language: 'zh-CN',
        sources: [{
          type: 'video/mp4',
          src: ''
        }],
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true  // 全屏按钮
        },
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        poster: '',
        notSupportedMessage: '抱歉，您访问的视频暂时无法播放！'
      }
    }
  },
  methods: {
    getFileFormat (fileName) {
      let suffix = ''
      let result = ''
      const flieArr = fileName.split('.')
      suffix = flieArr[flieArr.length - 1]
      if (suffix === 'mp4' || suffix === 'avi') {
        this.playerOptions.sources[0].type = 'video/mp4'
      } else if (suffix === 'm3u8') {
        this.playerOptions.sources[0].type = 'application/x-mpegURL'
      } else if (suffix === 'flv') {
        this.playerOptions.sources[0].type = 'rtmp/flv'
      } else {
        this.playerOptions.sources[0].type = 'application/x-mpegURL'
      }
    },

    onPlayerPlay (player) {
      this.$emit('curPlaer', this.index)
    },
    onPlayerPause (player) {
      // console.log('')
    },
    onPlayerReady (player) {
      // console.log('playready', play)
      this.$refs.videoPlayer.player.play()
    },
    onCanplay () {
      // console.log('canplay', play)
    },

    handleWindowScroll (event) {
      let vm = this

      setTimeout(() => {
        let top = vm.$refs.videoPlayer.$el.getBoundingClientRect().top
        // console.log('top---' + this.index + '  ', top)
        if (vm.$refs.videoPlayer.player) {
          try {
            if (top <= parseInt(vm.topValueArr[0]) || top > parseInt(vm.topValueArr[1])) {
              // console.log('top---' + this.index + '  pause')
              vm.$refs.videoPlayer.player.pause()
            } else {
              // console.log('top---' + this.index + '  player')
              if (window.pageYOffset > parseInt(vm.pageValue)) {
                vm.$refs.videoPlayer.player.play()
              } else {
                vm.$refs.videoPlayer.player.pause()
              }
            }
          } catch (err) {
            console.log(err)
          }
        }
      }, 300)
    }
  },
  mounted () {
    this.getFileFormat(this.currentCarema.url)
    this.$nextTick(() => {
      this.playerOptions.sources[0].src = this.currentCarema.url
      this.playerOptions.poster = this.currentCarema.imgUrl ? this.currentCarema.imgUrl : ''
      if (this.index === 0 && this.autoPlay) {
        this.playerOptions.autoplay = true
      }
    })
    if (this.autoPlay) {
      window.addEventListener('scroll', this.handleWindowScroll)
    }
  },
  watch: {
    curPlay (val) {
      try {
        if (this.index === val) {
          this.$refs.videoPlayer.player.play()
        } else {
          this.$refs.videoPlayer.player.pause()
        }
      } catch (err) {
        console.log(err)
      }
    }
  },
  beforeDestroy () {
    this.$refs.videoPlayer.player.ended()
    // this.$refs.videoPlayer1.player.dispose()
    if (this.autoPlay) {
      window.removeEventListener('scroll', this.handleWindowScroll)
    }
  }
}
</script>
